<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>莞外欣欣向荣</title>
    <link rel="stylesheet" href="../dist/css/weui.min.css" />
    <link rel="stylesheet" href="../dist/css/example.css" />
    
</head>
<body>
 <div class="container" id="container">
  <script type="text/html" id="tpl_home">
 	 <div class="page">
 	<div class="page home js_show">
 	<div class="page__hd">
 		<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="../dist/img/guanwaixinxinxiangrong.jpg" alt="">
                    </div>
                <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">莞外欣欣向荣</h4>
                        <!--<p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
                    </div>
                </a>
 		
        <p class="page__desc">今天是2017年3月5日，距离高考还有<span id="diffDate"></span>天</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li class="">
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">成绩分析</p>
                    <img src="../dist/images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner" data-height="220" style="">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_access js_item" data-id="ScoreAnalyze" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>退步最大十名</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="ScoreAnalyze" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>进步最大十名</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="ScoreAnalyze" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>年级前30统计</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="ScoreAnalyze" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>单科退步最大</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="ScoreAnalyze" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>年级前20统计</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>

            <li class="">
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">学生成绩查询</p>
                    <img src="../dist/images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                            <div class="weui-cell weui-cell_access js_item" data-id="searchbar" href="javascript:;">
                                <p>历史成绩查询</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            
            <li class="">
                <div class="weui-flex js_item" data-id="ScoreAnalyze">
                    <p class="weui-flex__item">学校通知</p>
                    <img src="../dist/images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
   </div> 
 </div>
</div>
</script>
</body>
<script src="../dist/js/zepto.min.js"></script>
<script src="../dist/js/example.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>

<script type="text/javascript" class="home js_show">
    $(function(){
    	
    var beginTime=getCurrentDate();
    var endTime="2017-06-07";
    var aDate, oDate1, oDate2, days; 
	aDate = beginTime.split("-"); 
	oDate1 = new Date(aDate[0], aDate[1], aDate[2]); 
	aDate = endTime.split("-"); 
	oDate2 = new Date(aDate[0] , aDate[1] , aDate[2]); 
	days = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
	$('#diffDate').html('<font color="red" size="6" >'+days+'</font>');
    	
        var winH = $(window).height();
        var categorySpace = 10;

        $('.js_item').on('click', function(){
            var id = $(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this = $(this),
                $inner = $this.next('.js_categoryInner'),
                $page = $this.parents('.page'),
                $parent = $(this).parent('li');
            var innerH = $inner.data('height');
            bear = $page;

            if(!innerH){
                $inner.css('height', 'auto');
                innerH = $inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }
        });
        
        function addZero(obj) 
        {
        	if (obj < 10) return "0" + obj; else return obj
    	}
        
        function getCurrentDate()
        {
        	var mydate = new Date();
	        var curr_year = mydate.getFullYear();
	        var curr_month = mydate.getMonth() + 1;
	        var curr_day = mydate.getDate();
	        var curr_H = mydate.getHours();
	        var curr_M = mydate.getMinutes();
	        var curr_S = mydate.getSeconds();
	        var monthDate = curr_year + "-" + addZero(curr_month) + "-" + addZero(curr_day);
	        return monthDate;
        }
        
/*    $(".weui-media-box__thumb").click(function()
	{
		$.showLoading("正在发送...");
	});*/
	
    });</script>
<script type="text/html" id="tpl_ScoreAnalyze">
<div class="page">
<!--    <div class="page__hd">
        <h1 class="page__title"></h1>
        <p class="page__desc"></p>
    </div>-->
        <div class="weui-cells__title">消息内容：</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入文本" rows="12"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
            </div>
        </div>
        <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>高级选项</p>
                </div>
                <div class="weui-cell__ft">
                </div>
        </a>
        <label for="weuiAgree" class="weui-agree">
            <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
            <span class="weui-agree__text">
                	是否需要消息回折</a>
            </span>
        </label>
    	<div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">发送</a>
        </div>    
    <div class="page__ft">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
    </div>
</div>
</script>
<script type="text/html" id="tpl_searchbar">
<div class="page">
    <div class="page__bd">
        <!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="weui-cells searchbar-result" id="searchResult">
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
        </div>
    </div>
    <div class="page__ft">
        <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel');

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                if(this.value.length) {
                    $searchResult.show();
                } else {
                    $searchResult.hide();
                }
            })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });

    });
</script>
</script>
</body>
</html>